<template>
  <div class="analysis" title="提示：单击按钮激活对应功能,在地图上单击开始，绘制中单击增加点、双击结束。">
    <div class="analysis-tool" v-for="(item, index) in htmlDataArr" :key="index" @click="goAnalysisOtherView(item.viewName)">
      <div v-show="item.viewName !== activeTool" class="analysis-tool-thum" :style="item.style">
        <img class="analysis-tool-thum_img" :src="item.img" :alt="item.name" />
      </div>
      <div v-show="item.viewName === activeTool" class="analysis-tool-thum" :style="item.activeStyle">
        <img class="analysis-tool-thum_img" :src="item.img" :alt="item.name" />
      </div>
      <span> {{ item.name }} </span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from "vue"
import rzfx from "./img/rzfx.svg"
import ksy from "./img/ksy.svg"
import flfx from "./img/flfx.svg"
import dxkw from "./img/dxkw.svg"
import dbtm from "./img/dbtm.svg"
import pdpx from "./img/pdpx.svg"
import mxpq from "./img/mxpq.svg"
import mxyp from "./img/mxyp.svg"
import xgfx from "./img/xgfx.svg"

const props = defineProps({
  noActive: Boolean
})

const activeTool = ref("")
watch(
  () => props.noActive,
  (newValue) => {
    if (newValue) {
      activeTool.value = ""
    }
  }
)

const htmlDataArr = [
  {
    name: "日照分析",
    style: "background: linear-gradient(135deg, rgba(247, 186, 134, 0.7) 0%, rgba(221, 117, 27, 0.7) 100%);",
    activeStyle: "background: linear-gradient(135deg, #F7BA86 0%, #DD751B 100%);",
    img: rzfx,
    viewName: "sunlight"
  },
  {
    name: "可视域",
    style: "background: linear-gradient(134deg, rgba(196, 155, 250, 0.7) 2%, rgba(149, 70, 255, 0.7) 100%);",
    activeStyle: "background: linear-gradient(134deg, #C49BFA 2%, #9546FF 100%);",
    img: ksy,
    viewName: "visible"
  },
  {
    name: "方量分析",
    style: "background: linear-gradient(135deg, rgba(168, 203, 255, 0.7) 0%, rgba(49, 111, 203, 0.7) 98%);",
    activeStyle: "background: linear-gradient(135deg, #A8CBFF 0%, #316FCB 98%);",
    img: flfx,
    viewName: "volume"
  },
  {
    name: "地形开挖",
    style: "background: linear-gradient(135deg, rgba(141, 244, 255, 0.7) 0%, rgba(19, 157, 172, 0.7) 98%);",
    activeStyle: "background: linear-gradient(135deg, #8DF4FF 0%, #139DAC 98%);",
    img: dxkw,
    viewName: "terrainClip"
  },
  {
    name: "地表透明",
    style: "background: linear-gradient(134deg, rgba(196, 155, 250, 0.7) 2%, rgba(149, 70, 255, 0.7) 100%);",
    activeStyle: "background: linear-gradient(134deg, #C49BFA 2%, #9546FF 100%);",
    img: dbtm,
    viewName: "terrainOpacity"
  },
  {
    name: "坡度坡向",
    style: "background: linear-gradient(136deg, rgba(176, 209, 122, 0.7) 0%, rgba(108, 161, 25, 0.7) 101%);",
    activeStyle: "background: linear-gradient(136deg, #B0D17A 0%, #6CA119 101%);",
    img: pdpx,
    viewName: "terrainSlope"
  },
  {
    name: "模型剖切",
    style: "background: linear-gradient(135deg, rgba(131, 226, 187, 0.7) 0%, rgba(24, 170, 110, 0.7) 99%);",
    activeStyle: "background: linear-gradient(135deg, #83E2BB 0%, #18AA6E 99%);",
    img: mxpq,
    viewName: "modelClip"
  },
  {
    name: "模型压平",
    style: "background: linear-gradient(135deg, rgba(112, 222, 120, 0.7) 0%, rgba(20, 162, 31, 0.7) 99%, rgba(27, 155, 36, 0.7) 100%);",
    activeStyle: "background: linear-gradient(135deg, #70DE78 0%, #14A21F 99%, #1B9B24 100%);",
    img: mxyp,
    viewName: "modelFlat"
  },
  {
    name: "限高分析",
    style: "background: linear-gradient(134deg, rgba(223, 225, 130, 0.7) 0%, rgba(144, 146, 14, 0.7) 98%);",
    activeStyle: "background: linear-gradient(134deg, #DFE182 0%, #90920E 98%);",
    img: xgfx,
    viewName: "modelLimitHeight"
  }
]

const emit = defineEmits(["goAnalysisOtherView"])

function goAnalysisOtherView(name: string) {
  activeTool.value = name
  emit("goAnalysisOtherView", name)
}
</script>
<style scoped lang="less">
.analysis {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
}

.analysis-tool {
  flex: 0 0 24%;
  cursor: pointer;
  user-select: none;
  height: 96px;
  box-sizing: border-box;
  text-align: center;
  padding-top: 12px;

  &:hover {
    color: var(--mars-hover-btn-bg);
  }
}

.analysis-tool-thum {
  transition: all 0.2s ease;
  width: 50px;
  height: 50px;
  margin: 0 auto;
  margin-bottom: 10px;
  background: #fd960f;
  overflow: hidden;
  cursor: pointer;
  border-radius: 2px;

  .analysis-tool-thum_img {
    position: relative;
    width: 71px;
    height: 71px;
    right: 23px;
    bottom: 19px;
    margin: 13px;
  }
}
</style>
